<template>
  <div class="table-scroll">
    <table>
      <thead>
        <tr>
          <th v-for="key in gridColumns">
            <span>{{key}}</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="entry in gridData">
          <td v-for="key in gridColumns">
            {{entry[key]}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name:'TchStaLockTable',
    props:{
      gridColumns: {},
      gridData:{}
    }
  }
</script>

<style>
  .table-scroll {
    width:100%;
    max-height:800px;
    overflow:scroll;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
  }
  .table-scroll::-webkit-scrollbar {
    width: 0 !important
  }
  table {
    /* border: 2px solid #42b983; */
    border-radius: 3px;
    background-color: #F3F3F3;
    overflow-x: scroll;
    width: 100%;
    border-collapse:collapse;
    border:1px solid #F3F3F3;
  }
  tr {
    border:1px solid #F3F3F3;
  }
  th {
    background-color: #FFFFFF;
    color: #A1A1A1;
    /* color: rgba(255, 255, 255, 0.66); */
    /* cursor: pointer; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 10px;
    font-weight: 100;
  }

  td {
    background-color: #FFFFFF;
    font-size: 14px;
    color: #1D1D1D;
    height: 26px;
    border:0px;
  }

  th,
  td {
    min-width: 120px;
    padding: 10px 20px;
  }
  /* td:first-child{background-color: #FFFFFF;color: #1D1D1D;position: sticky;left:0px;} */
  /* th:first-child{position: sticky;left:0px;top: 0px;} */
</style>
